<template>
  <div id="app">
    <div class="head">
      <div class="content">
        <div class="imgBox imgWrap">
          <router-link to="/Login">
            <img src="../src/assets/image/ganda.jpg" alt />
          </router-link>
        </div>
        <div class="textBox">高达音乐盒</div>
        <div class="buttonBox">
          <router-link to="/Down_load">
            <button>下载APP</button>
          </router-link>
        </div>
      </div>
      <div id="nav">
        <router-link to="/">推荐音乐</router-link>
        <router-link to="/Hot_music_list">排行榜</router-link>
        <router-link to="/Search">搜索</router-link>
      </div>
    </div>
    <!-- 底部播放器 -->
    <div ref="controlers" class="box" @click="toPlayPage">
      <i ref="startBtn" class="iconfont start" @click.stop="start">&#xe696;</i>
      <i ref="stopBtn" class="iconfont stop" @click.stop="stop">&#xe611;</i>
      <div class="left">
        <div class="back-pic">
          <img :src="backgroundPic" alt />
        </div>
        <div class="songMassege">
          <h3>《 {{ songname }} 》</h3>
          <div class="little-box">
            <h4 v-for="(item, index) in singer" :key="index">{{ item }}</h4>
          </div>
        </div>
      </div>
    </div>
    <!-- 引入播放页面组件 -->
    <div ref="songPage" class="play-page">
      <playPage 
      :bgcImg="backgroundPic" 
      :musicName="songname" 
      :musicSinger="singer"
      @startBtn="sBtn" 
      @pauseBtn="pBtn"
      @addIdx="dadAddIdx" 
      @minusIdx="dadMinusIdx"
      ></playPage>
    </div>

    <!-- 用来判断是否缓存当前组件 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
    <!-- <router-view/> -->
  </div>
</template>

<script>
import { getLyric } from "./assets/api";
import playPage from './components/musicList'
export default {
  components: {
    playPage
  },
  data() {
    return {
      isplay: true
    };
  },
  created() {
    let judge = localStorage.getItem("id");
    if (judge !== null) {
      this.isALoginState();
    }
  },
  computed: {
    backgroundPic() {
      if (this.$store.state.datas == null) {
        return "";
      } else {
        return this.$store.state.datas[this.$store.state.index].picurl;
      }
    },
    songname() {
      if (this.$store.state.datas == null) {
        return "";
      } else {
        return this.$store.state.datas[this.$store.state.index].name;
      }
    },
    singer() {
      if (this.$store.state.datas == null) {
        return "";
      } else {
        return this.$store.state.datas[this.$store.state.index].artists;
      }
    },
    datas() {
      return this.$store.state.datas;
    },
    runStatus(){
      return this.isplay
    },
    songIdx(){
      return this.$store.state.index  // 歌曲下标
    }
  },
  watch: {
    datas:{
      handler: async function(){
        this.musicUrl = "https://music.163.com/song/media/outer/url?id=" + this.$store.state.datas[this.$store.state.index].id;
        this.audio.src = this.musicUrl;
        this.audio.play();
        this.$root.$children[0].$refs.controlers.style.display = "block";     
        
        this.isplay = true;
        
        let lyric = await getLyric(this.$store.state.datas[this.$store.state.index].id); //获取歌词
        let filterLyric = undefined;
        if (lyric != '')
        {
          lyric =lyric.split("\n")//歌词拆分
          lyric = lyric.map(el=>{
              let attrVal = el.split("]");
              let time = attrVal[0].slice(1,6).split(":");
              time = Number(time[0]*60) + Number(time[1]);
              return{
                timeSong: time,       //0s 
                content: attrVal[1]   //作曲 : 苏靖凯
              }
          })   
           filterLyric = lyric.filter((item)=>{
            return item.content != ""
          })       
        }   
        this.$store.commit("getLyric",filterLyric) 
      } 
    },
    runStatus:{
      handler: function(){
        if (this.isplay === false){
          this.$refs.stopBtn.style.display = "none";
          this.$refs.startBtn.style.display = "block";
        }else{
          this.$refs.startBtn.style.display = "none";
          this.$refs.stopBtn.style.display = "block";
        }
      }
    },
    songIdx:{
      handler: async function(){
        let lyric = await getLyric(this.$store.state.datas[this.$store.state.index].id); //获取歌词
        let filterLyric = undefined;
        if (lyric != '')
        {
          lyric =lyric.split("\n")//歌词拆分
          lyric = lyric.map(el=>{
              let attrVal = el.split("]");
              let time = attrVal[0].slice(1,6).split(":");
              time = Number(time[0]*60) + Number(time[1]);
              return{
                timeSong: time,       //0s 
                content: attrVal[1]   //作曲 : 苏靖凯
              }
          })   
           filterLyric = lyric.filter((item)=>{
            return item.content != ""
          })       
        }   
        this.$store.commit("getLyric",filterLyric) 
      }
    },
    immediate:true,
    deep:true,
  },
  methods: {
    isALoginState() {
      this.$store.commit("isLoginState");
    },
    toLogin() {
      this.$router.push({
        name: "Down_load"
      });
    },
    stop(){
      this.audio.pause()
      this.isplay = false;
    },
    start(){
      this.audio.play()
      this.isplay = true;
    },
    toPlayPage() {
      this.$refs.songPage.style.transform = "translateY(0)";
      // let idx = this.$store.state.index;
    },
    pBtn(){
      this.isplay = false;
    },
    sBtn(){
      this.isplay = true;
    },
    dadAddIdx(){
      this.$store.state.index += 1;
    },
    dadMinusIdx() {
      this.$store.state.index -= 1;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./src/assets/scss/app.scss";
</style>


